{% block sw_cms_section_config %}
<div class="sw-cms-section-config">

    {% block sw_cms_section_config__quickactions %}
    <ul
        class="sw-cms-section-config__quickactions-list"
        :class="quickactionClasses"
    >
        {% block sw_cms_section_config__quickaction_duplicate %}
        <li
            class="sw-cms-section-config__quickaction"
            role="button"
            tabindex="0"
            @click="onSectionDuplicate(section)"
            @keydown.enter="onSectionDuplicate(section)"
        >
            <mt-icon
                name="regular-duplicate"
                size="16"
            />
            {{ $tc('global.default.duplicate') }}
        </li>
        {% endblock %}

        {% block sw_cms_section_config__quickaction_delete %}
        <li
            class="sw-cms-section-config__quickaction is--danger"
            role="button"
            tabindex="0"
            @click="onSectionDelete(section.id)"
            @keydown.enter="onSectionDelete(section.id)"
        >
            <mt-icon
                name="regular-trash"
                size="16"
            />
            {{ $t('global.default.delete') }}
        </li>
        {% endblock %}
    </ul>
    {% endblock %}

    {% block sw_cms_section_config__settings %}
    <div class="sw-cms-section-config__settings">

        {% block sw_cms_section_config_name_field %}

        <mt-text-field
            v-model="section.name"
            :label="$tc('sw-cms.detail.label.sectionNameField')"
            :help-text="$tc('sw-cms.detail.tooltip.sectionNameField')"
        />
        {% endblock %}

        {% block sw_cms_sidebar_section_config_css_classes_field %}

        <mt-text-field
            v-model="section.cssClass"
            :label="$tc('sw-cms.detail.label.cssClassField')"
            :help-text="$tc('sw-cms.detail.helpText.cssClassField')"
        />
        {% endblock %}

        {% block sw_cms_sidebar_section_config_sizing_field %}
        <mt-select
            v-model="section.sizingMode"
            :label="$tc('sw-cms.detail.label.sizingField')"
            :options="sizingModeOptions"
        />
        {% endblock %}

        {% block sw_cms_sidebar_section_config_sidebar_mobile %}
        <mt-select
            v-if="section.type === 'sidebar'"
            v-model="section.mobileBehavior"
            :label="$tc('sw-cms.detail.sidebar.mobile')"
            :options="mobileBehaviorOptions"
        />
        {% endblock %}

        {% block sw_cms_section_config_background_color_field %}
        <mt-colorpicker
            v-model="section.backgroundColor"
            :label="$tc('sw-cms.detail.label.backgroundColorLabel')"
            :placeholder="$tc('sw-cms.detail.label.backgroundColorField')"
        />
        {% endblock %}

        {% block sw_cms_section_config_background_image_field %}
        <sw-media-compact-upload-v2
            :source="section && section.backgroundMedia && section.backgroundMedia.id ? section.backgroundMedia : null"
            :upload-tag="uploadTag"
            :label="$tc('sw-cms.detail.label.backgroundMediaLabel')"
            :default-folder="cmsPageState.pageEntityName"
            :allow-multi-select="false"
            @media-upload-remove-image="removeMedia"
            @selection-change="onSetBackgroundMedia"
        />
        <sw-upload-listener
            :upload-tag="uploadTag"
            auto-upload
            @media-upload-finish="successfulUpload"
        />

        {% block sw_cms_section_config_background_image_position_field %}
        <mt-select
            v-model="section.backgroundMediaMode"
            :label="$tc('sw-cms.detail.label.backgroundMediaMode')"
            :disabled="!section.backgroundMediaId"
            :options="backgroundMediaModeOptions"
        />
        {% endblock %}
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
